import { Alert, Box, Button, TextField, Typography } from '@mui/material';
import React, { FC, useState } from 'react';
import {
  useCreatePair,
  useGetAllPairs,
  useOutputAmount,
  useSwapTokens,
} from './useUniswap';
import { useWeb3React } from '@web3-react/core';

const Swap: FC = () => {
  const { account } = useWeb3React();
  const { createPair, isLoading, error, createdPairAddress } = useCreatePair();
  const { getAllPairs, allPairs } = useGetAllPairs();
  const {
    outputAmount,
    inputAmount,
    tokenBBalance,
    tokenABalance,
    setInputAmount,
    setOutputAmount,
    OutputAmountAB,
    getBalances,
  } = useOutputAmount();

  const {
    swapTokens,
    isLoading: isLoadings,
    error: errors,
    txHash,
  } = useSwapTokens();

  const [tokenA, setTokenA] = useState(
    '0xaB1a4d4f1D656d2450692D237fdD6C7f9146e814',
  );
  const [tokenB, setTokenB] = useState(
    '0xFa60D973F7642B748046464e165A65B7323b0DEE',
  );
  const [tokenAnum, setTokenAnum] = useState();
  const [tokenBnum, setTokenBnum] = useState();
  // const tokenA='0xFa60D973F7642B748046464e165A65B7323b0DEE'

  // const tokenB='0xaB1a4d4f1D656d2450692D237fdD6C7f9146e814'

  // const tokenB='0x8d008B313C1d6C7fE2982F62d32Da7507cF43551'
  const onChangeSwapTokens = async () => {
    console.log(account, 'account');
    if (!account) return;

    await swapTokens(
      tokenB,
      tokenA,
      Number(outputAmount),
      Number(inputAmount),
      account,
    );

    ('0x84b44698b8e08c9567c2c6b2c27f787b47540d96acf049fda46b5a08c039e462');
  };
  return (
    <Box>
      <Alert variant="outlined" severity="error">
        {error}
      </Alert>
      <Typography>流动池：{createdPairAddress}</Typography>
      {allPairs}
      <Box>
        {' '}
        <br /> <br />
      </Box>
      <TextField
        label="TokenAddressA"
        defaultValue={tokenA}
        value={tokenA}
        onChange={(event: any) => {
          setTokenA(event.target.value);
        }}
      />
      <TextField
        label="TokenAddressB"
        defaultValue={tokenB}
        value={tokenB}
        onChange={(event: any) => {
          setTokenB(event.target.value);
        }}
      />
      <Box>
        {' '}
        <br /> <br />
      </Box>
      <Button
        onClick={() => {
          createPair(tokenA, tokenB), getAllPairs();
        }}
      >
        创建流动池
      </Button>
      <Box>
        {' '}
        <br /> <br />
      </Box>
      A数量
      <TextField
        label="tokenAnum"
        defaultValue=""
        value={inputAmount}
        onChange={(event: any) => {
          OutputAmountAB();
          getBalances();
          setInputAmount(event.target.value);
        }}
      />
      <Box>
        {' '}
        <br /> <br />
      </Box>
      <Typography>tokenName : {tokenABalance?.name}</Typography>
      <Typography>Symbol :{tokenABalance?.symbol}</Typography>
      <Typography>tokenA剩余额度:{tokenABalance?.balance}</Typography>
      <Box>
        {' '}
        <br /> <br />
      </Box>
      tokenB数量
      <TextField
        label="tokenAnum"
        defaultValue=""
        value={outputAmount}
        onChange={(event: any) => {}}
      />
      <Box>
        {' '}
        <br /> <br />
      </Box>
      <Typography>tokenName : {tokenBBalance?.name}</Typography>
      <Typography>Symbol :{tokenBBalance?.symbol}</Typography>
      <Typography>tokenb剩余额度:{tokenBBalance?.balance}</Typography>
      <Box>
        {' '}
        <br /> <br />
      </Box>
      <Button disabled={isLoadings} onClick={onChangeSwapTokens}>
        SwapTokens
      </Button>
      <Typography>txHash : {txHash}</Typography>
    </Box>
  );
};
export default Swap;
